<!-- PROTO: load 2 app -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Boot two app</title>
    <script src="//cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
    <link
      href="//cdn.jsdelivr.net/npm/angular@1.8.3/angular-csp.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div ng-app="app1">
      <!-- app1 的内容 -->
      <div ng-controller="Ctrl1 as vm">
        <div ng-click="vm.button_click()">{{ vm.message }}</div>
      </div>
    </div>
    <div ng-app="app2">
      <!-- app2 的内容 -->
      <div ng-controller="Ctrl2 as vm">
        <div ng-click="vm.button_click()">{{ vm.message }}</div>
      </div>
    </div>
    <div ng-app="app3">
      <!-- app2 的内容 -->
      <div ng-controller="Ctrl3 as vm">
        <div ng-click="vm.button_click()">{{ vm.message }}</div>
      </div>
    </div>
    <script type="module">
      var app1 = angular.module("app1", ["app2", "app3"]);
      var app2 = angular.module("app2", []);
      var app3 = angular.module("app3", []);

      app1.controller(
        "Ctrl1",
        class Ctrl1 {
          constructor($scope) {
            this.message = "Hello, app1!";
          }
          button_click() {
            console.log("Ctrl1");
            console.log(this.$scope);
          }
        },
      );

      app2.controller(
        "Ctrl2",
        class Ctrl2 {
          constructor($scope) {
            this.message = "Hello, app2!";
          }
          button_click() {
            console.log("Ctrl2");
            console.log(this.$scope);
          }
        },
      );
      app3.controller(
        "Ctrl3",
        class Ctrl3 {
          constructor($scope) {
            this.message = "Hello, app3!";
          }
          button_click() {
            console.log("Ctrl3");
            console.log(this.$scope);
          }
        },
      );
      // 重放到 [ng-app="app2"] 和 [ng-app="app3"]
      // 这里 angular 能够自动匹配对应的 module
      angular.bootstrap(document.querySelector('div[ng-app="app2"]'), ["app1"]);
      angular.bootstrap(document.querySelector('div[ng-app="app3"]'), ["app1"]);
    </script>
  </body>
</html>
